<template>
  <div class="head">
    <div class="top">
      <img src="../../../../static/img/flh/data_logo.png" />
      <em class="line"></em>
      <div class="title">
        <slot name="title"></slot>
      </div>
    </div>
    <div class="time">
      <span>{{newYTD}}</span>
      <span>{{clock}}</span>
    </div>
  </div>
</template>

<script>
    let interval = null;
    export default {
        props: {
            hideLogo: {
                type: Boolean,
                default: () => {
                    return false;
                }
            }
        },
        data() {
            return {
                newYTD: null,
                clock: null
            };
        },
        mounted() {
            this.setDate();
        },
        beforeDestroy() {
            clearInterval(interval);
        },
        methods: {
            setDate() {
                var self = this;
                interval = setInterval(function() {
                    var nowtime = new Date();
                    var year = nowtime.getFullYear();
                    var month = nowtime.getMonth() + 1;
                    var date = nowtime.getDate();
                    var newYTD = year + "年" + month + "月" + date + "日";
                    var newDate = nowtime.toLocaleTimeString();
                    self.$set(self, "clock", newDate);
                    self.$set(self, "newYTD", newYTD);
                }, 1000);
            }
        }
    };
</script>


<style lang="scss" scoped>
    @import "../../../styles/base/_parameters";
    .head {
        position: absolute;
        top: 0;
        right: 0;
        left: 0;
        z-index: 1;
        width: 528px;
        height: 107px;
        margin: auto;
        background: url("../../../../static/img/flh/data_tle.png") left top no-repeat;
        background-size: 100% 100%;
        .top {
            @include flex-ic-jsa;
            width: calc(100% - 100px);
            height: 81px;
            margin: auto;
            & img {
                width: 147px;
                height: 42px;
            }
            & .line {
                display: inline-block;
                width: 1px;
                height: 38px;
                background-color: rgba(#2be951, 0.2);
            }
            & .title {
                display: inline-block;
                color: #55eea8;
                font-size: 30px;
                font-weight: bold;
            }
        }
        .time {
            margin-top: 15px;
            color: #55eea8;
            font-size: 16px;
            text-align: center;
        }
    }
</style>